<template>
  <div>
    <a-card>
      <a-form-model ref="rulesForm" :model="form" :rules="rules" :labelCol="{ lg: { span: 5 }, sm: { span: 7 } }" :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }">
        <h3 style="margin-bottom:24px;">订阅邀请</h3>
        <div class="upload-content">
          <a-form-model-item label="选择微信素材" required>
            <div class="xcx">
              <a-card hoverable v-show="subMaterial.id != ''" class="xcx-card">
                <img slot="cover" :src="subMaterial.imgUrl" alt="" class="img-cover" />
                <a-card-meta>
                  <template slot="title">
                    <ellipsis :length="20" tooltip>{{ subMaterial.createTime }}</ellipsis>
                  </template>
                  <template slot="description">
                    {{ subMaterial.title }}
                  </template>
                </a-card-meta>
              </a-card>
              <a-button @click="openMaterial('sub')">选择微信素材</a-button>
              <span v-show="showwxTip.sub && !form.subMaterialId" class="tip">请选择微信素材</span>
            </div>
          </a-form-model-item>
          <a-form-model-item label="小程序海报" prop="subXcxImg" required>
            <JImageUpload :uploadParams="getUploadParams()" :fileSize="0.5" :accept="'image/*'" @fileChange="e => fileXcxImageChange(e, 'subXcxImg')" v-model="subXcxImg"></JImageUpload>
            <div class="upload__tip" style="line-height: 16px;">835*900，支持jpg/png格式，文件大小不超过0.5M</div>
            <div class="tip" v-show="tips.subXcxImg && form.subXcxImg.length == 0">请上传图片！</div>
          </a-form-model-item>
          <a-form-model-item label="公众号海报" prop="subGzhImg" required>
            <JImageUpload :uploadParams="getUploadParams()" :fileSize="0.5" :accept="'image/*'" @fileChange="e => fileXcxImageChange(e, 'subGzhImg')" v-model="subGzhImg"></JImageUpload>
            <div class="upload__tip" style="line-height: 16px;">835*900，支持jpg/png格式，文件大小不超过0.5M</div>
            <div class="tip" v-show="tips.subGzhImg && form.subGzhImg.length == 0">请上传图片！</div>
          </a-form-model-item>
        </div>
        <a-divider />
        <h3 style="margin-bottom:24px;">要盒邀请</h3>
        <div class="upload-content">
          <a-form-model-item label="选择微信素材" required>
            <div class="xcx">
              <a-card hoverable v-show="wantMaterial.id != ''" class="xcx-card">
                <img slot="cover" :src="wantMaterial.imgUrl" alt="" class="img-cover" />
                <a-card-meta>
                  <template slot="title">
                    <ellipsis :length="20" tooltip>{{ wantMaterial.createTime }}</ellipsis>
                  </template>
                  <template slot="description">
                    {{ wantMaterial.title }}
                  </template>
                </a-card-meta>
              </a-card>
              <a-button @click="openMaterial('want')">选择微信素材</a-button>
              <span v-show="showwxTip.want && !form.wantMaterialId" class="tip">请选择微信素材</span>
            </div>
          </a-form-model-item>
          <a-form-model-item label="小程序海报" prop="xcxImg" required>
            <JImageUpload :uploadParams="getUploadParams()" :fileSize="0.5" :accept="'image/*'" @fileChange="e => fileXcxImageChange(e, 'xcxImg')" v-model="xcxImg"></JImageUpload>
            <div class="upload__tip" style="line-height: 16px;">835*900，支持jpg/png格式，文件大小不超过0.5M</div>
            <div class="tip" v-show="tips.xcxImg && form.xcxImg.length == 0">请上传图片！</div>
          </a-form-model-item>
          <a-form-model-item label="公众号海报" prop="gzhImg" required>
            <JImageUpload :uploadParams="getUploadParams()" :fileSize="0.5" :accept="'image/*'" @fileChange="e => fileXcxImageChange(e, 'gzhImg')" v-model="gzhImg"></JImageUpload>
            <div class="upload__tip" style="line-height: 16px;">835*900，支持jpg/png格式，文件大小不超过0.5M</div>
            <div class="tip" v-show="tips.gzhImg && form.gzhImg.length == 0">请上传图片！</div>
          </a-form-model-item>
        </div>
        <a-button type="primary" @click="handleSubmit" style="margin:96px auto 0;display:block;" :loading="saveLoading">
          保存
        </a-button>
      </a-form-model>
    </a-card>
    <MaterialModal ref="materialModal" @getChoose="getChoose"></MaterialModal>
  </div>
</template>
<script>
import globalData from '@/assets/js/common'
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { Ellipsis, MaterialModal } from '@/views/box/components'
import { exclusiveSave, exclusiveData } from '@/api/box/setting'
export default {
  data() {
    return {
      form: {
        subXcxImg: [],
        subGzhImg: [],
        xcxImg: [],
        gzhImg: []
      },
      subXcxImg: [],
      subGzhImg: [],
      xcxImg: [],
      gzhImg: [],
      subMaterial: {
        id: '',
        imgUrl: '',
        title: '',
        createTime: ''
      },
      wantMaterial: {
        id: '',
        imgUrl: '',
        title: '',
        createTime: ''
      },
      materialType: '',
      dataSource: [],
      tips: {
        subXcxImg: false,
        subGzhImg: false,
        xcxImg: false,
        gzhImg: false
      },
      showwxTip: {
        sub: false,
        want: false
      },
      saveLoading: false
    }
  },
  components: { JImageUpload, MaterialModal, Ellipsis },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileXcxImageChange(list, type) {
      this.form[type] = list
    },
    openMaterial(type) {
      this.materialType = type
      this.$refs.materialModal.show()
    },
    getChoose(item) {
      if (this.materialType == 'sub') {
        this.subMaterial = {
          id: item.id,
          imgUrl: item.imgUrl,
          title: item.title,
          createTime: item.createTime
        }
        this.form.subMaterialId = item.id
      } else if (this.materialType == 'want') {
        this.wantMaterial = {
          id: item.id,
          imgUrl: item.imgUrl,
          title: item.title,
          createTime: item.createTime
        }
        this.form.wantMaterialId = item.id
      }
    },
    fetchData() {
      exclusiveData().then(res => {
        if (res.code == 0) {
          if (res.data.length > 0) {
            this.dataSource = res.data
            for (let item of this.dataSource) {
              if (item.type == 0) {
                this.form.subMaterialId = item.wxMaterialId
                this.subMaterial = item.bWxMaterial
                if (item.imgType == 0) this.subXcxImg = [item.imgUrl]
                if (item.imgType == 1) this.subGzhImg = [item.imgUrl]
              } else if (item.type == 1) {
                this.form.wantMaterialId = item.wxMaterialId
                this.wantMaterial = item.bWxMaterial
                if (item.imgType == 0) this.xcxImg = [item.imgUrl]
                if (item.imgType == 1) this.gzhImg = [item.imgUrl]
              }
            }
          } else {
            this.dataSource = []
          }
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    handleSubmit() {
      /**
       * imgType: 0 小程序海报 1 公众号海报
       * type: 0 订阅邀请 1 要盒邀请
       */
      let imgValidate = false
      let imgValue = {}
      Object.keys(this.tips).forEach(key => {
        if (this.form[key].length > 0) {
          this.tips[key] = false
          imgValue[key] = this.form[key][0].url
        } else {
          this.tips[key] = true
          imgValidate = true
        }
      })
      let materialValidate = false
      if (this.form.subMaterialId && this.form.wantMaterialId) {
      } else {
        materialValidate = true
        this.showwxTip.sub = this.form.subMaterialId ? false : true
        this.showwxTip.want = this.form.wantMaterialId ? false : true
      }
      if (!materialValidate && !imgValidate) {
        this.saveLoading = true
        if (this.dataSource.length == 0) {
          this.dataSource = [
            {
              type: 0,
              imgType: 0,
              imgUrl: imgValue.subXcxImg,
              wxMaterialId: this.form.subMaterialId
            },
            {
              type: 0,
              imgType: 1,
              imgUrl: imgValue.subGzhImg,
              wxMaterialId: this.form.subMaterialId
            },
            {
              type: 1,
              imgType: 0,
              imgUrl: imgValue.xcxImg,
              wxMaterialId: this.form.wantMaterialId
            },
            {
              type: 1,
              imgType: 1,
              imgUrl: imgValue.gzhImg,
              wxMaterialId: this.form.wantMaterialId
            }
          ]
        } else {
          for (let item of this.dataSource) {
            if (item.type == 0) {
              item.wxMaterialId = this.form.subMaterialId
              if (item.imgType == 0) {
                item.imgUrl = imgValue.subXcxImg
              } else if (item.imgType == 1) {
                item.imgUrl = imgValue.subGzhImg
              }
            } else if (item.type == 1) {
              item.wxMaterialId = this.form.wantMaterialId
              if (item.imgType == 0) {
                item.imgUrl = imgValue.xcxImg
              } else if (item.imgType == 1) {
                item.imgUrl = imgValue.gzhImg
              }
            }
            delete item.bWxMaterial
            delete item.createTime
            delete item.updateTime
          }
        }
        console.log(this.dataSource)
        let params = {
          requestData: {
            list: this.dataSource
          }
        }
        exclusiveSave(params).then(res => {
          this.saveLoading = false
          if (res.code == 0) {
            this.$message.success('保存成功！')
            this.fetchData()
          } else {
            this.$message.warning(res.msg)
          }
        })
      }
    }
  }
}
</script>
<style lang="less" scoped>
.xcx {
  display: flex;
  align-items: center;
  img {
    width: 150px;
    height: 150px;
    object-fit: scale-down;
    margin-right: 12px;
  }
  p {
    margin-right: 12px;
  }
  .tip {
    color: #f5222d;
    margin-left: 12px;
  }
}
.xcx-card {
  width: 224px;
  margin-right: 12px;
  .img-cover {
    height: 100%;
    width: 100%;
    object-fit: scale-down;
    border-bottom: 1px solid #e8e8e8;
    display: block;
  }
}

/deep/.xcx-card {
  .ant-card-cover {
    height: 120px;
  }
  .ant-card-body {
    min-height: 100px;
  }
  .ant-card-meta-title {
    color: rgba(0, 0, 0, 0.45);
    font-size: 14px;
    font-weight: normal;
  }
  .ant-card-meta-description {
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    word-wrap: break-word;
  }
}
.tip {
  color: #f5222d;
  line-height: 22px;
}
</style>

